import { createRef, useEffect, useState } from 'react'
import examApi from './api'
import dayjs from 'dayjs'
import Logo from '@/component/common/logo/Logo'
import './index.scss'
import { Button, Flex } from 'antd'
import { MyDialog } from '@/component/common/myDialog'
import WritePanel from '@/component/common/writePanel'
import { useNavigate } from 'react-router-dom'
import { useMessageApi } from '@/component/context/messageContext/message'

export default function Wait() {
  const [examData, setExamData] = useState<any>({})
  const getExam = async () => {
    await examApi.getExam().then((data: any) => {
      data.begin = dayjs(data.begin).format('YYYY-MM-DD HH:mm:ss')
      data.end = dayjs(data.end).format('YYYY-MM-DD HH:mm:ss')
      setExamData(data)
    })
  }
  const navigate = useNavigate()
  useEffect(() => {
    getExam()
  }, [])
  const messageApi = useMessageApi()

  const [isShowRuleDialog, setIsShowRuleDialog] = useState(false)
  let ChildRef = createRef()
  const getBase64 = async () => {
    let target = ChildRef.current as any
    let res = target.getBase64()
    await examApi.uploadSignature(res).then((res) => {
      setIsShowRuleDialog(false)
      getExam()
    })
  }
  const RuleDialog = () => {
    return (
      <MyDialog
        width="40%"
        open={isShowRuleDialog}
        onCancel={() => setIsShowRuleDialog(false)}
        footer={[
          <Button
            onClick={() => {
              getBase64()
            }}>
            确定
          </Button>,
        ]}
        onOk={() => {
          // addExamUsers(location.pathname.split('/')[4], userSelectedRowKeys)
        }}>
        <div style={{ height: '40vh', overflow: 'scroll' }}>
          <div style={{ padding: '20px', lineHeight: '1.8', fontSize: '14px' }}>
            <h3 style={{ textAlign: 'center', marginBottom: '20px' }}>
              考试诚信承诺书
            </h3>
            <p>本人承诺在考试过程中遵守以下规定：</p>
            <ol style={{ paddingLeft: '20px' }}>
              <li>独立完成考试，不与他人交流或讨论试题；</li>
              <li>不使用手机、平板等通讯设备查找答案；</li>
              <li>不复制、传播试题内容；</li>
              <li>不使用网络搜索引擎查找答案；</li>
              <li>不使用AI工具或其他辅助软件；</li>
              <li>保证所提交的答案均为本人独立思考的结果。</li>
            </ol>
            <p style={{ marginTop: '20px' }}>
              本人已完全理解上述规定，如有违反，愿意承担相应的处理结果，包括但不限于本次考试成绩作废。
            </p>
            <p style={{ marginTop: '20px', textAlign: 'right' }}>
              承诺人（签名）：_______________
            </p>
          </div>
          <WritePanel onRef={ChildRef} value={examData.signature}></WritePanel>
        </div>
      </MyDialog>
    )
  }
  const joinExam = async () => {
    if (examData.isSubmitSignature !== 1) {
      messageApi.warning('请先阅读并同意考试协议')
      return
    }
    if (dayjs(examData.begin).isAfter(dayjs())) {
      messageApi.warning('考试未开始')
      return
    }
    if (dayjs(examData.end).isBefore(dayjs())) {
      messageApi.warning('考试已结束')
      return
    }
    await examApi.begin().then((res: any) => {
      if (res?.code !== 200) {
        return
      } else {
        navigate('/exam')
      }
    })
  }
  
  return (
    <div className="wait">
      <div className="logo">
        <Logo width={50} margin={'20px 0'}></Logo>
      </div>
      <Flex className="form" gap={'1rem'}>
        <h2>{examData.name}</h2>
        <div className="msg">
          笔试时间：{examData.begin} ~ {examData.end}
        </div>
        <div className="msg">笔试限时：{examData.duration}分钟</div>
        <Flex className="todos" gap="1rem">
          <div
            className="todo"
            style={{
              backgroundColor: examData.isSubmitSignature
                ? 'rgba(146,143,255,0.3)'
                : '#fff',
            }}
            onClick={() => {
              setIsShowRuleDialog(true)
            }}>
            阅读协议
          </div>
        </Flex>
        <Flex justify="center" style={{ marginTop: '1rem' }}>
          <Button
            disabled={Number(examData.isSubmitSignature) !== 1}
            onClick={() => {
              joinExam()
            }}>
            进入笔试
          </Button>
        </Flex>
      </Flex>
      <div className="form2"></div>
      <div className="form3"></div>
      <div className="form4"></div>
      {RuleDialog()}
    </div>
  )
}
